<template>
	<div v-if="go==1">
		<div class="top">
				<el-input v-model="filedname" placeholder="请输入申请人姓名" />
				<el-input v-model="moveclass" placeholder="请输入调班班级" />
				<el-input v-model="movecourse" placeholder="请输入所调课程" />
				<el-input v-model="approver" placeholder="请输入审批人" />
				<el-button class="searchBtn" type="info" :icon="Search" @click="search">搜索</el-button>
				<el-button class="addBtn" type="info" :icon="CirclePlus" @click="goReac">申请</el-button>
		</div>
		<div class="part">
			<el-table :data="moveClassData" style="width: 100%" height="55vh">
				<el-table-column prop="teaName" label="申请老师" />
				<el-table-column prop="subName" label="所调课程" />
				<el-table-column prop="clazzName" label="所调班级" />
				<el-table-column prop="newTime" label="调课时间" />
				<el-table-column prop="createTime" label="申请时间" />
				<el-table-column prop="userName" label="审批人" />
				<el-table-column label="审批状态">
					<template #header>
						<el-dropdown @command="siftuser" trigger="click">
							 <span class="el-dropdown-link">
							      审批状态<el-icon class="el-icon--right"><arrow-down /></el-icon>
							</span>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item command=3>全部</el-dropdown-item>
									<el-dropdown-item command=0>未审批</el-dropdown-item>
									<el-dropdown-item command=1>审批通过</el-dropdown-item>
									<el-dropdown-item command=2>审不通过</el-dropdown-item>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</template>
					<template #default = "score">
						<div style="color:#ff0000" v-if="score.row.status == 2">审批未通过</div>
						<div style="color:#6cac39" v-if="score.row.status == 1">审批通过</div>
						<div style="color:#999999" v-if="score.row.status == 0">未审批</div>
					</template>
					
				</el-table-column>
				<el-table-column label="详情">
					<template #default="score">
						<a class="detailBtn" @click="goDetial(score.row.reaId)">详情</a>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template #default = "score">
						<a class="delBtn" @click="del(score.row.reaId)">删除</a>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				layout="prev,pager,next"
				:page-count="total"
				:page-size="pageSize"
				v-model:current-page="pageNum"	
				@current-change="changePage"
			></el-pagination>
		</div>
	</div>
	<!-- 删除模态框 -->
	 <el-dialog
	    v-model="centerDialogVisible"
	    width="500"
	    align-center
	  >
	    <p style="text-align: center;font-size: 18px;">确定删除该调课信息？</p>
	    <template #footer>
	      <div class="dialog-footer">
	        <el-button type="info" class="sureBtn" @click="sure">确定</el-button>
	        <el-button type="info" class="cancelBtn" @click="centerDialogVisible = false">
	          取消
	        </el-button>
	      </div>
	    </template>
	  </el-dialog>
	<ApplyReassignment v-if="go==2" @back="goBack" :reaId="reaId"></ApplyReassignment>
	<DetialReassignment v-if="go==3" @back="goBack" :reaId="reaId"></DetialReassignment>
</template>

<script setup lang="ts">
	import ApplyReassignment from '@/components/ApplyReassignment.vue'
	import DetialReassignment from '@/components/DetialReassignment.vue'
	import {Search,CirclePlus,ArrowDown} from '@element-plus/icons-vue'
	import {reactive,ref,onMounted,defineEmits,defineProps} from 'vue'
	import {ClassList,SearchClassList,DelChangeClass} from '@/api/zzx'
	import { ElMessage } from 'element-plus'
	let filedname=ref<string>("")
	let moveclass=ref<string>("")
	let movecourse=ref<string>("")
	let approver=ref<string>("")
	let flag=ref<boolean>(true)
	let go=ref(1)
	const centerDialogVisible = ref(false)
	//分页
	//审批搜索
	const siftuser=(command)=>{
		// status = command
		//pageNum.value = 1
		search(command);
	}
	const pageSize=4;
	let total=ref(0)
	let pageNum=ref(1);
	//调课表格数据
	let moveClassData=ref()
	//调取调课列表
	const getClassList=async ()=>{
		let res = await ClassList({
			pageindex:pageNum.value,
			pagesize:pageSize
		})
		// console.log("调课审批列表",res)
		moveClassData.value=res.list
		total.value=res.num
	}
	getClassList()
	
	
	//点击搜索
	const search=async (v)=>{
		let data={
			pageindex:pageNum.value,
			pagesize:pageSize,
			teaName:filedname.value,
			clazzName:moveclass.value,
			subName:movecourse.value,
			userName:approver.value
		}
		if(typeof v =="string"){
			data.status=v
		}
		let res=await SearchClassList(data)
		// console.log("调课列表搜索",res)
		moveClassData.value=res.list
		total.value=res.num
	}
	//点击分页器
	const changePage=(page)=>{
		//console.log(page)
		pageNum.value=page;
		search()
	}
	//点击详情
	let reaId=ref("")
	const goDetial=(id)=>{
		reaId.value=id
		go.value=3
	}
	//点击返回
	const goBack=()=>{
		reaId.value=""
		go.value=1
		getClassList()
	}
	//点击申请
	const goReac=()=>{
		go.value=2
	}
	//点击删除
	let delId=ref("")
	const del=(reaId)=>{
		delId.value=reaId;
		centerDialogVisible.value=true
	}
	//点击删除中的确定
	const sure=async ()=>{
		let res=await DelChangeClass({
			reaId:delId.value
		})
		// console.log("删除调课",res)
		if(res==undefined){
			ElMessage({
			    message: '删除成功',
			    type: 'success',
			  })
		}
		centerDialogVisible.value=false
		getClassList()
	}
</script>

<style scoped lang="less">
	.el-input{
		width: 205px;
		margin-right: 10px;
		border: none;
	}
	.searchBtn{
		background-color: #106ab1;
		border: none;
	}
	.addBtn{
		background-color: #00a0e9;
		border: none;
		float: right;
		margin-right: 20px;
	}
	/* 表格距顶部的距离 */
	.el-table{
		margin-top: 20px;
	}
	.el-table{
		--el-table-border-color:none;
		--el-table-borde:none;
		--el-table-bg-color:none !important;    
		--el-table-header-bg-color:#f3f8fd;
		--el-table-header-text-color:#333 !important
	}
	/* 表格间隙 */
	:deep(.el-table__body) {
		-webkit-border-vertical-spacing: 9px;
	}
	:deep(.el-table .el-table__cell){
		text-align: center !important;
	}
	// 分页样式
	.el-pagination{
		--el-pagination-bg-color:none;
		--el-pagination-button-disabled-bg-color:none;
		justify-content: center;
	}
	.detailBtn{
		color: #106ab1;
		cursor: pointer;
	}
	.delBtn{
		color: #ff0000;
		cursor: pointer;
	}
	
	
	.cancelBtn{
	    background-color: #999999;
		width: 80px;
	}
	.sureBtn{
		background-color: #106ab1;
		border: none;
		width: 80px;
	}
	.dialog-footer{
		width: 80%;
		margin: 20px auto;
		display: flex;
		justify-content: space-around;
	}
</style>